<template>
  <div class="home">
    <!-- <van-empty description=""> </van-empty> -->
    <div style="padding-left: 20%; padding-right: 20%; padding-top: 6rem">
      <p style="text-align: center">自主报备二维码</p>
    </div>
    <div  class="bb" @click="gotoInfo()" :style="{'background': 'url('+baseImg+') no-repeat 100%/100% rgba(0, 0, 0, 0.1)'}" >
      <!-- <div class="bb">
           class="diagramTop-item-click"
            </div>     -->

      <!-- <img

        style="margin-left: 30%; margin-right: 30%"
        :src="baseImg"
        alt=""
      /> -->
      <!-- <img class="diagramTop-item-click" style="margin-left: 30%; margin-right: 30%;" :src="baseImg" alt="" /> -->
    </div>

    <div style="padding-left: 12%; padding-right: 12%;margin-top: 23rem;">
      <p style="text-align: center">点击二维码可查看具体填报内容</p>
    </div>

    <div style="margin: 16px; display: flex"></div>
  </div>
</template>

<script>
import area from '@/libs/area.json'
import { helpUserNewQrCode } from '@/api/self/help'
import { getRecordInfoByIdTime, getNameCodeMobeil } from '@/api/self/record'

import { Toast, Dialog } from 'vant'
export default {
  data () {
    return {
      baseImg: '',
      id: ''
    }
  },
  mounted () {
    this.init()
    this.timer = window.setInterval(() => {
      setTimeout(this.init(), 0)
    }, 30000)
  },
  methods: {
    gotoInfo () {
      getNameCodeMobeil({
        card_no: this.$route.query.idCard,
        pageSize: 10
      }).then((res) => {
        if (res.data.errcode === 0) {
          console.log(res.data.data.results)
          if (res.data.data.results != 0) {
            this.id = res.data.data.results[0].id
            let url =
              'https://dalianoutbreaknew.lngov.top/railway/#/record-qrinfo?id=' +
              this.id +
              '&time=' +
              new Date().getTime()
            window.open(
              // 'http://wechat.dlairport.com:8800/2019nCoV/Default2.aspx?id=' +
              url,
              '_blank'
            )
          }
        } else {
          Toast.fail(res.data.msg)
        }
      })
    },
    init () {
      getNameCodeMobeil({
        card_no: this.$route.query.idCard,
        pageSize: 10
      }).then((res) => {
        if (res.data.errcode === 0) {
          console.log(res.data.data.results)
          if (res.data.data.results != 0) {
            this.id = res.data.data.results[0].id
            let url =
              'https://dalianoutbreaknew.lngov.top/railway/#/record-qrinfo?id=' +
              this.id +
              '&time=' +
              new Date().getTime()
            console.log('url=====,===', url)
            helpUserNewQrCode({ param: url }).then((res) => {
              Toast.clear()
              if (res.data.errcode === 0) {
                this.baseImg = res.data.data
                console.log(this.baseImg)
              } else {
                Toast.fail(res.data.msg)
              }
            })
          }
        } else {
          Toast.fail(res.data.msg)
        }
      })
    },
    get () {
      getRecordInfoByIdTime(this.$route.query.id, new Date().getTime()).then(
        (res) => {
          if (res.data.errcode === 0) {
            // this.checked = true
            // this.formData = res.data.data
            // this.postData = res.data.data.uploader
            // let formdata = JSON.parse(JSON.stringify(this.formData))
            // this.formData.avenue_flow_area =
            //   formdata.avenue_flow_area == true ? '1' : '0'
            // ;(this.formData.avenue_flow_area == formdata.avenue_flow_area) == true
            //   ? '1'
            //   : '0'
            // this.formData.nucleic_acid = formdata.nucleic_acid == true ? '1' : '0'
            // this.formData.trave_mode =
            //   formdata.trave_mode == 0
            //     ? (this.formData.trave_mode = '飞机')
            //     : formdata.trave_mode == 1
            //     ? (this.formData.trave_mode = '火车')
            //     : formdata.trave_mode == 2
            //     ? (this.formData.trave_mode = '轮渡')
            //     : formdata.trave_mode == 3
            //     ? (this.formData.trave_mode = '自驾')
            //     : (this.formData.trave_mode = '客运')
            // this.traveConfirm(this.formData.trave_mode)
            // formdata.card_type == 4
            //   ? (formdata.card_type = '港澳通行证')
            //   : this.formData.card_type == 2
            //   ? (this.formData.card_type = '军官证')
            //   : this.formData.card_type == 3
            //   ? (this.formData.card_type = '护照')
            //   : (this.formData.card_type = '身份证')
          } else {
            Toast.fail(res.data.msg)
          }
        }
      )
    },

    goToRest () {
      this.$router.push({
        name: 'record',
        query: { id: this.$route.query.id, code: this.$route.query.code }
      })
    }
  }
}
</script>
<style type="text/css">
.bb,
.bb::before,
.bb::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.bb {
  width: 450px;
  height: 450px;
  margin: auto;
  color: #69ca62;
  box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
}
.bb::before,
.bb::after {
  content: '';
  z-index: -1;
  margin: -5%;
  box-shadow: inset 0 0 0 2px;
  animation: clipMe 8s linear infinite;
}
.bb::before {
  animation-delay: -4s;
}
.bb:hover::after,
.bb:hover::before {
  background-color: rgba(255, 0, 0, 0.3);
}

@keyframes clipMe {
  0%,
  100% {
    clip: rect(0px, 520px, 2px, 0px);
  }
  25% {
    clip: rect(0px, 2px, 520px, 0px);
  }
  50% {
    clip: rect(518px, 520px, 520px, 0px);
  }
  75% {
    clip: rect(0px, 5100px, 520px, 500px);
  }
}
</style>
<style lang="less" scoped>
.diagramTop-item {
  width: 102px;
  height: 32px;
  background-color: #0e141f;
  border: 1px solid #e1730d;
  box-shadow: 0px 1px 0px 0px rgba(9, 13, 20, 1);
  border-radius: 6px;
}

.diagramTop-item-click {
  border: 9px solid #4d15bc;
  box-shadow: 0px 0px 7px 2px rgb(55 159 254 / 80%);
  animation: mymove 0.5s infinite;
  -webkit-animation: mymove 0.5s infinite; /*Safari and Chrome*/
}
@keyframes mymove {
  from {
    border: 9px solid #379ffe;
    box-shadow: 0px 0px 7px 2px rgb(55 159 254 / 80%);
  }
  to {
    border: 9px solid #bd15cf;
    box-shadow: 0px 1px 0px 0px rgba(9, 13, 20, 1);
  }
}

@-webkit-keyframes mymove /*Safari and Chrome*/ {
  from {
    border: 1px solid #379ffe;
    box-shadow: 0px 0px 7px 2px rgb(55 159 254 / 80%);
  }
  to {
    border: 1px solid #090d14;
    box-shadow: 0px 1px 0px 0px rgba(9, 13, 20, 1);
  }
}
.upload-img-5 {
  margin: 5px 0 90px 0;
}
.upload-img-1 {
  margin: 5px 0 15px 0;
}
.home {
  //   background: url('../../assets/images/smtb.jpg')no-repeat;

  img {
    width: 40%;
  }
  .dialog-container {
    height: 70vh;
    overflow-y: auto;
  }
  .get-area {
    width: 100%;
    padding: 0 0.8rem;
    font-size: 0.747rem;
    color: #fff;
    background-color: #1989fa;
    border: 0.053rem solid #1989fa;
    height: 2.347rem;
    line-height: 2.347rem;
    text-align: center;
    border-radius: 0.107rem;
    cursor: pointer;
    box-sizing: border-box;
    margin-right: 10px;
  }
  /deep/.van-field__label {
    width: 8em;
  }
  /deep/.van-field__error-message {
    text-align: right;
  }
  .title {
    // font-size: 28px;
    text-indent: 20px;
    padding: 50px 0 20px;
  }
  .container {
    width: 90%;
    height: 80vh;
    overflow-y: auto;
    border: 1px solid #adadad;
    margin: auto;
    .item {
      margin: 10px;
    }
  }
}
.up-and-down {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f1f3f4;
  height: 80px;
  color: #333;
}
// .home .blue {
//   background-color: transparent;
// }
// .home .van-cell{
//  background-color: transparent;
// }
</style>
